<template>
	<NavBar :obj="{ title: '收款方式', color: '#000', backgroundColor: '#fff' }" />
	<view class="container">
		<view class="title"></view>

		<view class="main" v-if="infoRef.type == 'bank'">
			<u-row class="main_li">
				<u-col span="3">银行名称</u-col>
				<u-col span="9" class="bank" @click="getShow">
					<view :class="{ black: bankName }">
						{{ bankName != '' ? bankName : '请选择银行名称' }}
					</view>
					<view><u-icon name="arrow-down" color="#333" size="16" class="arrow-down"></u-icon></view>
				</u-col>
			</u-row>
			<u-row class="main_li">
				<u-col span="3">开户姓名</u-col>
				<view class="flex-1">
					<input type="text" v-model="infoRef.bank_open_name" placeholder="请填写开户姓名" class="inp" placeholder-class="place-inp" />
				</view>
			</u-row>
			<u-row class="main_li">
				<u-col span="3">银行账号</u-col>
				<view class="flex-1">
					<input type="number" v-model="infoRef.bank_number" placeholder="请填写银行卡账号" class="inp" placeholder-class="place-inp" />
				</view>
			</u-row>
		
			<u-row class="main_li">
				<u-col span="3">开户行地址</u-col>
				<view class="flex-1">
					<input type="text" v-model="infoRef.bank_address" placeholder="请填写银行卡开户行地址" class="inp" placeholder-class="place-inp" />
				</view>
			</u-row>
		</view>

		<view class="main" v-else-if="infoRef.type == 'wechat'">
			<u-row class="main_li">
				<u-col span="3">真实姓名</u-col>
				<view class="flex-1">
					<input type="text" v-model="infoRef.wechat_name" placeholder="请填写微信真实姓名" class="inp" placeholder-class="place-inp" />
				</view>
			</u-row>

			<u-row class="main_li">
				<u-col span="3">收款码</u-col>
				<view class="flex-1">
					<Upload v-model="files" :maxCount="1" @change="handleChange" />
				</view>
			</u-row>
		</view>

		<view class="main" v-else>
			<u-row class="main_li">
				<u-col span="3">真实姓名</u-col>
				<view class="flex-1">
					<input type="text" v-model="infoRef.alipay_name" placeholder="请填写支付宝真实姓名" class="inp" placeholder-class="place-inp" />
				</view>
			</u-row>

			<u-row class="main_li">
				<u-col span="3">收款码</u-col>
				<view class="flex-1">
					<Upload v-model="files" :maxCount="1" @change="handleChange" />
				</view>
			</u-row>
		</view>

		<view class="confirm" @click="submit">确认</view>
		<up-picker :show="bankShow" :columns="bankList" @cancel="cancel" @confirm="confirm" keyName="title"></up-picker>
	</view>
</template>

<script setup>
	import { ref, nextTick } from 'vue';
	import { port, goUrl, imgUrl, hint, goBack, loading, closeLoading } from '/service/port';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import Upload from '/components/Uploads.vue';

	
	const bankList = ref([]);
	const bankShow = ref(false);
	const infoRef = ref({
		type: ''
	});
	const bankName = ref('');
	const type = ref('');
	const set = ref('');
	const isLoad = ref(false);
	onLoad((e) => {
		infoRef.value.type = e.type;
		set.value = e.set;
	});

	onShow(() => {
		if(!isLoad.value){
		
			getMethod();
			isLoad.value = true;
		}
		
	});

	const files = ref([]);
	const handleChange = (event) => {
		const images = files.value.map((i) => {
			return i.url;
		});

		infoRef.value[infoRef.value.type + '_image'] = images.length > 0 ? images.join(',') : '';
	};

	const getShow = () => {
		bankShow.value = true;
	};
	async function getMethod() {
		await nextTick();
		let res = await port('getMethodInfo', { type: infoRef.value.type });
		infoRef.value = {
			...res.data
		};
		bankName.value = res.data.bank_name;
		bankList.value = [res.data.bank_list];
		
		files.value = res.data[infoRef.value.type + '_image'] ? [{ url: imgUrl + res.data[infoRef.value.type + '_image'] }] : [];
	}
	function cancel() {
		bankShow.value = false;
	}
	function confirm(e) {
		bankName.value = e.value[0];
		infoRef.value.bank_name = e.value[0];
		bankShow.value = false;
	}
	async function submit() {
		loading();
		let res = await port('methodSave', infoRef.value);
		closeLoading();
		hint(res.msg);
		setTimeout(() => {
			set.value ? goBack() : getMethod();
		}, 300);
	}
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #f4f5f8;
	}
	::v-deep .u-upload__button {
		margin: 0;
	}

	.black {
		color: #000 !important;
	}
	.inp {
		color: #000;
	}
	.place-inp {
		color: #bdbdbd;
	}

	.container {
		margin: 0 30upx;
		.title {
			margin-top: 44upx;
			color: #666;
			font-size: 26upx;
		}
		.main {
			background: #fff;
			border-radius: 20upx;
			// margin-top: 30upx;
			.main_li:last-child {
				border-bottom: none !important;
			}
			.main_li {
				padding: 30rpx 0;
				color: #000;
				font-size: 28upx;
				display: flex;
				flex: 1 2 0%;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1upx solid #eee;
				view {
					color: #000;
					display: flex;
					text-align: left;
					font-size: 28upx;
					input {
						width: 100%;
						font-size: 28upx;
					}
				}
				.bank {
					display: flex;
					justify-content: space-between !important;
					align-items: center;
					view {
						color: #bdbdbd;
					}
				}
				view:last-child {
					color: #bdbdbd;
				}
			}
		}
		.confirm {
			margin-top: 86upx;
			color: #fff;
			background: $theme-bg-btn-color;
			text-align: center;
			line-height: 88upx;
			border-radius: 88upx;
		}
	}
</style>
